<template>
  <el-card>
    <!-- 头部 -->
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-button type="primary" @click="addFn">添加客户</el-button>
      </el-col>
      <el-col>
        <el-row type="flex" justify="start">
          <el-select v-model="agent" placeholder="请选择">
            <el-option v-for="item in Depts" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-input
            v-model="search"
            class="search"
            placeholder="请输入内容"
          />
          <el-button @click="filterFn">筛选</el-button>
        </el-row>
      </el-col>
    </el-row>
    <!-- 分割线 -->
    <el-divider />
    <!-- 员工信息表单 -->
    <el-row>
      <el-table border :data="clientLists">
        <el-table-column label="图片">
          <template v-slot="{row}">
            <img :src="row.image" alt="" style="width:100px">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="agent.name" label="经纪" />
        <el-table-column prop="wechat" label="微信" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column v-slot="{row}" label="操作" fixed="right" width="280">
          <el-button size="small" type="primary" @click="updataFn(row.id)">编辑</el-button>
          <el-button size="small" type="danger" @click="dleFn(row.id)">删除</el-button>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row type="flex" justify="center">
      <!-- 分页器 -->
      <el-pagination
        layout="prev, pager, next"
        :page-size="list._limit"
        :total="ClientNum"
        @current-change="currentChange"
      />
    </el-row>
    <el-dialog
      :title="formData.id ? '编辑客户' : '新增客户'"
      :visible="showVisible"
      width="50%"
      @close="closeFn"
    >
      <el-form ref="form" :model="formData" :rules="rules" label-width="140px">
        <el-form-item label="经纪">
          <el-select v-model="formData.agent" style="width:50%" placeholder="请选择">
            <el-option v-for="item in Depts" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item prop="name" label="姓名">
          <el-input v-model="formData.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formData.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formData.phone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="微信">
          <el-input v-model="formData.wechat" placeholder="请输入微信号" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="formData.desc" type="textarea" size="small" placeholder="请输入个人描述" />
        </el-form-item>
        <el-form-item label="封面">
          <UploadFile ref="img" />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button size="small" @click="closeFn">取消</el-button>
          <el-button type="primary" size="small" @click="confirmFn">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>

  </el-card>
</template>

<script>
import { getclientLists,
  dleClientLists, getBroker,
  addClientLists, getClientId, updateClientList,
  getClientNum } from '@/api/client'

export default {
  data() {
    return {
      list: {
        _limit: 4, // 最大的条数
        _start: 0 // 从0开始
      },
      agent: '',
      search: '',
      ClientNum: 0,
      clientLists: [], // 员工列表
      showVisible: false,
      Depts: [],
      formData: {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      },
      rules: {
        name: [{ required: true, message: '名字不能为空', trigger: 'blur' }, {
          min: 2, max: 5, message: '名字长度2-5', trigger: 'blur'
        }],
        desc: [{ required: true, message: '描述不能为空', trigger: 'blur' }, {
          min: 2, max: 50, message: '描述字数2-50', trigger: 'blur'
        }]
      }
    }
  },
  async created() {
    this.getclientLists()
    // 获取经纪列表
    this.Depts = await getBroker()
    console.log(143, this.Depts)
    // 获取客户数量
    this.ClientNum = await getClientNum()
  },
  methods: {
    // 获取员工信息
    async getclientLists() {
      // 设置传递的参数，结构处理
      const params = {
        ...this.list
      }
      params.agent = this.agent || null
      params.name_contains = this.search || null
      const res = await getclientLists(params)
      console.log(144, res)
      this.clientLists = res
      if (this.ClientNum > res.length) {
        this.ClientNum = await getClientNum()
      } else {
        this.ClientNum = res.length
      }
    },
    // 点击切换下一页
    currentChange(data) {
      this.list._start = (data - 1) * this.list._limit
      this.getclientLists()
    },
    // 点击新增员工
    addFn() {
      this.showVisible = true
    },
    // 确定新增和编辑
    async confirmFn() {
      // 获取组件内的图片文件
      const obj = this.$refs.img.fileList[0]
      // 将图片地址赋值给表单
      this.formData.image = obj.url
      // 表单校验
      this.$refs.form.validate()
      if (this.formData.id) {
        await updateClientList(this.formData)
      } else {
        await addClientLists(this.formData)
      }
      this.closeFn()
      this.getclientLists()
    },
    // 关闭显示窗，清空表单和校验规则
    closeFn() {
      this.showVisible = false
      this.formData = {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      }
      // 清空图片和校验规则
      this.$refs.img.removeFn()
      this.$refs.form.resetFields()
    },
    // 点击删除
    dleFn(id) {
      this.$confirm('是否删除客户', '删除', {
        type: 'warning'
      }).then(async() => {
        await dleClientLists(id)
        this.getclientLists()
      }).catch(err => {
        console.log('取消', err)
      })
    },
    // 点击编辑
    async updataFn(id) {
      this.showVisible = true
      this.formData = await getClientId(id)
      this.$refs.img.fileList.push({
        url: this.formData.image
      })
    },
    // 筛选
    filterFn() {
      this.getclientLists()
      this.agent = ''
      this.search = ''
    }
  }
}
</script>

<style scoped>
.el-card {
  margin: 20px;
}
.el-select {
  width: 150px;
}
.search {
  width: 580px;
}
</style>
